<template>
	<view class="j-weight-price" v-if="weight">
		<text class="weight-text">净重约{{ weight }}斤</text>
		<text class="unit-price">约¥{{ unitPrice }}/斤</text>
	</view>
</template>

<script>
export default {
	name: 'JWeightPrice',
	props: {
		// 商品价格
		price: {
			type: [String, Number],
			required: true
		},
		// 净重（斤）
		weight: {
			type: [String, Number],
			required: true
		},
		// 重量文本颜色
		weightColor: {
			type: String,
			default: '#666'
		},
		// 单价文本颜色
		unitPriceColor: {
			type: String,
			default: '#fa436a'
		},
		// 文本字体大小
		textSize: {
			type: String,
			default: '24rpx'
		},
		// 背景颜色
		backgroundColor: {
			type: String,
			default: '#f8f9fa'
		},
		// 内边距
		padding: {
			type: String,
			default: '8rpx 12rpx'
		},
		// 圆角
		borderRadius: {
			type: String,
			default: '8rpx'
		}
	},
	computed: {
		// 计算单价（元/斤）
		unitPrice() {
			if (!this.weight || this.weight <= 0) return '0.00';
			const unitPrice = parseFloat(this.price) / parseFloat(this.weight);
			return unitPrice.toFixed(2);
		}
	}
};
</script>

<style lang="less" scoped>
.j-weight-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	padding: v-bind(padding);
	background: v-bind(backgroundColor);
	border-radius: v-bind(borderRadius);

	.weight-text {
		font-size: v-bind(textSize);
		color: v-bind(weightColor);
		font-weight: 500;
	}

	.unit-price {
		font-size: v-bind(textSize);
		color: v-bind(unitPriceColor);
		font-weight: bold;
	}
}
</style>


